---
to: src/components/src/<%= name %>/index.tsx
---
import React from 'react';
import Styles from './index.module.scss';
import ErrorBoundary from 'common/components/error-boundary';

interface <%= name
    .toLowerCase()
    .replace(/([-_][a-z])/g, group =>
      group
        .toUpperCase()
        .replace('-', '')
        .replace('_', '')
    )
    .replace(/^[a-z]/, firstLetter => firstLetter.toUpperCase()) %>Props {}

const <%= name
    .toLowerCase()
    .replace(/([-_][a-z])/g, group =>
      group
        .toUpperCase()
        .replace('-', '')
        .replace('_', '')
    )
    .replace(/^[a-z]/, firstLetter => firstLetter.toUpperCase()) %>: React.FC<<%= name
    .toLowerCase()
    .replace(/([-_][a-z])/g, group =>
      group
        .toUpperCase()
        .replace('-', '')
        .replace('_', '')
    )
    .replace(/^[a-z]/, firstLetter => firstLetter.toUpperCase()) %>Props> = () => {
  return (
    <ErrorBoundary moduleName="<%= name %>">
      <div className={Styles['container']}>
        <h1><%= name %></h1>
      </div>
    </ErrorBoundary>
  );
};

export default <%= name
    .toLowerCase()
    .replace(/([-_][a-z])/g, group =>
      group
        .toUpperCase()
        .replace('-', '')
        .replace('_', '')
    )
    .replace(/^[a-z]/, firstLetter => firstLetter.toUpperCase()) %>;

<%= name %> 

<%= category %> 

<%= model %> 
.replace(/_/g, '')
